<!DOCTYPE html>
<html>
<head>
  <title>Welcome</title>
</head>
<body>
    <div ng-controller="HomeCtrl">
	    <div>
	    	<input type="text" ng-model="person.name" placeholder="Enter your name">	
	        <a ng-click="sayHello()">Say Hello</a>
	        <p>{{person}}</p>
	    </div>
		<div>
			<p>{{time}}</p>
		</div>  
		<div>
			<button ng-click="number=number+1">add one</button>
			<p>number :{{number}}</p>
		</div>
		<div ng-init="ifshow = true">
			<button ng-show="ifshow" ng-click="ifshow = !ifshow">button1</button>
			<button ng-hide="ifshow" ng-click="ifshow = !ifshow">button2</button>
		</div>

		<button ng-init="shouldShow = true" ng-click="shouldShow = !shouldShow">Flip the shouldShow variable</button>
		<div ng-show="shouldShow">
			<h3>Showing {{ shouldShow }}</h3>
		</div> 
		<div ng-hide="shouldShow">
			<h3>Hiding {{ shouldShow }}</h3>
		</div>

		<div>
			<ul>
				<li ng-repeat="students in people">{{students.name}}</li>
			</ul>
			<ul>
				<li ng-repeat="person in roommates">{{ person.name }}</li> 
			</ul>
		</div>

		<div>
			<ul>
				<li ng-repeat="(name, color) in keyvalue">{{name}}'s color is {{color}}</li>
			</ul>
		</div>
    </div> 
</body>
</html>